<template>
	<div class="mine-red-packet">
		<div class="mineRedPacket-box">
			<ZxyhHeader v-if="getPlatform == 'app'" :title="'我的红包'" :isClose='false' :isRule='true' @rule ='showPopup'></ZxyhHeader>
			<div v-else class="mineRedPacket-box-title">
				<div v-if="isBack" class="back" @click="mineRedPacketBack"></div>
				<p class="my-redPacket-box">我的红包<span @click="showPopup">兑换规则<i class="iconfont iconwenhao"></i></span></p>
			</div>
			<div class="connectRedBox">
				<NavCom :navTabs='navTabs' @navCom="navCom"></NavCom> 
				
				<div class="nav-tab-box">
					<van-list
						v-model="loading"
						:finished="finished"
						:immediate-check="false"
						:finished-text="redPacketList.length>1?'没有更多了':''"
						@load="onLoad"
						:offset="10"
						>
					<!-- 未兑换 -->
					<div v-if="tabType=='1'"> 
						<div v-if="redPacketList.length<1 && finished" class="no-data">
                            <img src="../../assets/images/zxyh/my/red_bag.png" alt="">
							<p>空空如也～您还没有可兑换的红包</p>
						</div>
						<ul v-else>
							<li class="item-box" v-for="(item,i) in redPacketList" :key="i">
							<div class="item-box-bottom">
								<div class="item-left">￥{{item.money}}</div>
								<div class="item-right">
									<p>有效期至</p>
									<p class="item-date">{{item.exchangeExpTime}}</p>
									<p v-if="item.isExchange==1" class="item-to-remind" @click="redPacketDH(item,'去兑换')">去兑换</p>
									<p v-else class="item-tip" @click="redPacketDH(item,'兑换提醒')">兑换提醒</p>
								</div>
							</div>
						</li>
						</ul>
					</div>
					<!-- 已兑换 -->
					<div v-else-if = "tabType==2">
						<div v-if="redPacketList.length<1 && finished" class="no-data">
                            <img src="../../assets/images/zxyh/my/red_bag.png" alt="">
							<p>空空如也～您还没有已兑换的红包</p>
						</div>
						<ul v-else>
							<li class="item-box" v-for="(item,i) in redPacketList" :key="i">
								<p class="collect-time">领取时间：{{item.snatchTime}}</p>
								<div class="item-box-bottom item-box-redeemed">
									<div class="item-left">￥{{item.money}}</div>
									<div class="item-right">
										<p>有效期至</p>
										<p class="item-date">{{item.exchangeExpTime}}</p>
										<p class="redeemed">已兑换</p>
									</div>
								</div>
						   </li>
						</ul>
					</div>
					<!-- 已过期 -->
					<div v-else>
						<div v-if="redPacketList.length<1 && finished" class="no-data">
                            <img src="../../assets/images/zxyh/my/red_bag.png" alt="">
							<p>空空如也～您还没有已过期的红包</p>
						</div>
						<ul v-else>
							<li class="item-box" v-for="(item,i) in redPacketList" :key="i">
								<div class="item-box-bottom item-box-expired">
									<div class="item-left">￥{{item.money}}</div>
									<div class="item-right">
										<p>有效期至</p>
										<p class="item-date">{{item.exchangeExpTime}}</p>
										<p class="expired">已过期</p>
									</div>
								</div>
						   </li>
						</ul>						
					</div>
					</van-list>
				</div>
				
			</div>
		</div>
		<van-popup v-model="exchangeRulesShow" class="van-popup" :close-on-click-overlay="false">
			<div class="exchange-rules-box">
				<p class="title">红包兑换提示</p>
				<!-- 微信 弹框二维码 长按 -->
				<div class="tip-connect" v-if="footerType===1">
					<p>1.长按识别红包兑换二维码，允许“视吧LIVE”获取相关权限。</p>
					<p>2.请于红包领取后的7个自然日内进行兑换，逾期不可兑换，兑换成功后预计24小时内到账至微信钱包。</p>
					<p>3.请妥善保存兑换二维码，切勿转发给他人。</p>
				</div>
				<!-- app 弹框二维码 截图 -->
				<div class="tip-connect" v-if="footerType===2">
					<p>1.截图保存红包兑换二维码，通过微信扫码允许“视吧LIVE”获取相关权限。</p>
					<p>2.请于红包领取后的7个自然日内进行兑换，逾期不可兑换，兑换成功后预计24小时内到账至微信钱包。</p>
					<p>3.请妥善保存兑换二维码，切勿转发给他人。</p>
				</div>
			</div>
		</van-popup>
		<div v-if="exchangeRulesShow" class="forkOff" @click="closePopup"></div>
				<!-- 去兑换  兑换提醒-->
		<div v-if="coverBoxShow" class="red-code-base64-box">
			<!--<div class="redCodeBase64Center">
				<div>
					<img :src="redCodeBase64">
					<p v-if="footerType===3">截图保存二维码，微信扫码兑换红包</p>
					<p v-else>长按上方识别二维码即可兑换红包</p>
				</div>
				<img class="closeMe" @click="closeMe" src='./../../assets/images/closeCode.png'>
			</div>-->
			<div class="conversion-box">
				<div class="white-bg-box">
					<p class="conversion-title">红包可在7天内进行有效兑换</p>
					<div class="er-img-box">
						<img v-if="isMoHuImg" class="er-code-img" src="../../assets/images/hongBao/dim-packet-red.png" />
						<p v-if="isMoHuImg" class="er-time">预计二维码展示时间：<br />{{exchangeTime}}</p>
						<img v-if="isBase64Img" class="er-code-img" :src="redCodeBase64" />

					</div>
					<p v-if="isBase64Img" class="tip-text1">微信识别二维码兑换红包</p>
					<div class="close-btn" @click="closeMe">
						关闭
					</div>
				</div>
			</div>

		</div>

	</div>
</template>
<script>
	require("jr-qrcode");
	import config from "@/config"
	import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	import NavCom from '../my/components/navCom.vue'
	export default {
		components:{
		 ZxyhHeader,
		 NavCom
		},
		data() {
			return {
				un: this.$store.state.userInfo.un,
				redCodeBase64: "",
				coverBoxShow: false,
				footerType: null, //1 微信  2 app
				isBack: false, //返回按钮显示不显示
				exchangeRulesShow: false, //兑换规则是否显示
				exchangeTime: '', //兑换的时间
				isMoHuImg: false, //模糊图片
				isBase64Img: false, //二维码src
				getPlatform:fun.getPlatform(), //app wx
				navTabs:[{title:'未兑换',id:1},{title:'已兑换',id:2},{title:'已过期',id:3}],
				tabType:1,
				page:1,
				loading: false,
				finished: false,
				redPacketList:[]
				
				
			};
		},
		created: function() {
			//isExchange true 可以兑换  false不可以兑换
			this.$store.dispatch("hideNav");
			var ua = navigator.userAgent.toLowerCase();
			this.isBack = /MicroMessenger/i.test(ua);//true 微信
			this.footerType = /MicroMessenger/i.test(ua) ? 1 : 2;
			
		},
		mounted: function() {
			this.getRedData(this.tabType);				
		},
		methods: {
			mineRedPacketBack() {
				this.$router.push(`/${this.$channel}/mine`);
			},
			//用户红包数据
			getRedData(tabType) {
				//tabType 0 全部 ,1未兑换.2已兑换,3已过期
				var HongBaoData = {
					qid: new Date().getTime(),
					curr_page: this.page,
					page_size: 10,
					payee_act: this.un,
					tab_type:tabType,
				};
				this.$http.post("/packet/q_user_packet", HongBaoData, {
						headers: {
							"Content-Type": "application/json"
						}
					}).then(res => {
                            let {code,data} = res.data
							if(code == "000000") {
								this.loading = false
								this.redPacketList = this.redPacketList.concat(data)
								if(data.length<10){
									this.finished = true;
								}
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			// tab切换
			navCom(data){ //tabType 0 全部 ,1未兑换.2已兑换,3已过期
				this.tabType = data.data.id;
				this.redPacketList = [];
				this.finished = false;
				this.page = 1;
				this.getRedData(this.tabType)
			},
			//滚动加载时触发
			onLoad() {
				this.page++;
				this.getRedData(this.tabType);
			},
			//红包兑换
			redPacketDH(v, type) {
				if(type == '去兑换') {
					let jmStr = v.redPacketInfo;
					let buildUrl = `${config.API_HOST}auth/redpacketsync?redPacketInfo=${v.redPacketInfo}&payee_act=${v.payeeAct}`;
					let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3f8ffdf8f070dbf6&redirect_uri=${encodeURIComponent(buildUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
					let imgBase64 = jrQrcode.getQrBase64(url);
					this.redCodeBase64 = imgBase64;
					this.isMoHuImg = false;
					this.isBase64Img = true;
					this.coverBoxShow = true;
				} else if(type == '兑换提醒') {
					this.exchangeTime = v.exchangeTime.slice(5, 16);
					this.isMoHuImg = true;
					this.isBase64Img = false;
					this.coverBoxShow = true;
				}
			},
			closeMe() {
				this.coverBoxShow = false;
			},
			// 展示兑换规则
			showPopup() {
				this.exchangeRulesShow = true;
			},
			//  关闭兑换规则
			closePopup() {
				this.exchangeRulesShow = false;
			},
			
		}
	};
</script>

<style scoped="scoped">
	.mineRedPacket-box-title {
		position: relative;
	}

	.mineRedPacket-box-title p {
		width: 100%;
		height: 80px;
		position: relative;
		font-size: 36px;
		text-align: center;
		line-height: 80px;
		color: #333333;
	}

	.my-redPacket-box span {
		position: absolute;
		right: 40px;
		font-size: 26px;
		font-weight: 500;
		color: #D04648;
	}

	.my-redPacket-box span i {
		margin-left: 10px;
	}

	.back {
		width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
		z-index: 100;
	}

	.mineRedPacket-box {
		background: white;
		width: 750px;
		height: 1334px;
	    overflow-y: hidden;
	}

	header {
		width: 750px;
		height: 80px;
		background: rgba(255, 255, 255, 1);
		border-radius: 15px;
		display: flex;
		box-shadow: 0px 3px 10px 0px rgba(232, 232, 232, 0.4);
	}

	header p {
		float: left;
		line-height: 80px;
		color: #1d1d1d;
		font-size: 32px;
	}

	.mineRedPacket-header-price {
		width: 120px;
		text-align: center;
		flex: 2;
	}

	.mineRedPacket-header-time {
		width: 400px;
		text-align: center;
		flex: 3;
	}

	.mineRedPacket-header-operation {
		width: 125px;
		flex: 2;
		text-align: center;
	}

	.connect li {
		width: 670px;
		height: 160px;
		/*background: url(../../assets/images/mineLi.png) no-repeat;*/
		background-size: 750px 196px;
		border-radius: 15px;
		/*background: pink;*/
		margin-top: 20px;
		color: #1d1d1d;
		float: left;
		margin-left: 40px;
	}

	.li-left {
		width: 514px;
		height: 160px;
		/*background: silver;*/
		float: left;
		background: #CC3538;
		background: rgba(204, 53, 56, 0.1);
		box-shadow: 0px 1px 7px 1px rgba(1, 1, 1, 0.1);
		border-radius: 15px;
		/*border-right:4px dotted white;*/
	}

	.lineSX {
		width: 2px;
		height: 140px;
		border: 2px dashed rgba(204, 53, 56, 0.1);
		float: left;
		margin-top: 12px;
		background: white;
	}

	.lineSXgay {
		border: 2px dashed #f4f4f4;
		background: #e9e9e9;
	}

	.li-right {
		width: 150px;
		height: 160px;
		/*background: skyblue;*/
		color: rgba(153, 153, 153, 1);
		font-size: 26px;
		float: left;
		background: #026A7B;
		background: rgba(204, 53, 56, 0.1);
		box-shadow: 0px 1px 7px 1px rgba(1, 1, 1, 0.1);
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.li-nummoney {
		width: 180px;
		height: 160px;
		/*background: #1D1D1D;*/
		float: left;
		font-size: 40px;
		line-height: 160px;
		text-align: center;
		color: #CC3538;
		float: left;
		margin-right: 10px;
		font-weight: bold;
	}

	.li-date {
		width: calc(100vw - 426px);
		height: 95px;
		/*background: fuchsia;*/
		float: left;
		line-height: 120px;
		text-align: left;
		color: #333333;
		font-size: 28px;
		font-weight: 500;
	}

	.li-left p {
		width: 320px;
		height: 60px;
		/*background: darkorchid;*/
		float: left;
		font-size: 20px;
		text-align: left;
		color: #A9A8A8;
		font-weight: 500;
	}

	.li-btn {
		border-radius: 17px;
		font-size: 26px;
		line-height: 50px;
		text-align: center;
		color: white;
		width: 140px;
		height: 50px;
		background: #CC3538;
		border-radius: 25px;
	}

	.connect-left {
		width: 150px;
		height: 120px;
		line-height: 120px;
		text-align: center;
		border-right: 4px dotted rgba(187, 187, 187, 1);
		display: inline-block;
		float: left;
	}

	.connect-middle {
		width: 450px;
		height: 120px;
		display: inline-block;
		float: left;
		padding-left: 20px;
		font-size: 32px;
	}

	.connect-middle-p1 {
		margin-top: 30px;
	}

	.connect-middle-p2 {
		font-size: 24px;
		margin-top: 15px;
	}

	.connect-right {
		width: 150px;
		height: 120px;
		/*background: azure;*/
		display: inline-block;
		float: left;
	}

	.connect-right-btn {
		width: 120px;
		height: 60px;
		background: rgba(187, 187, 187, 1);
		box-shadow: 0px 1px 5px 1px rgba(8, 9, 6, 0.1);
		border-radius: 15px;
		color: white;
		text-align: center;
		line-height: 60px;
		margin: 24px 20px;
	}

	.connect-right-btnred {
		width: 120px;
		height: 60px;
		background: #cc3538;
		box-shadow: 0px 1px 5px 1px rgba(8, 9, 6, 0.1);
		border-radius: 15px;
		color: white;
		text-align: center;
		line-height: 60px;
		margin: 24px 20px;
	}

	.redPacket-more {
		width: 750px;
		height: 32px;
		color: #cc3538;
		line-height: 32px;
		text-align: center;
		margin-top: 30px;
	}

	.mineRedPacket-connect-box {
		padding-bottom: 30px;
		overflow: scroll;
		height: calc(100vh - 180px);
		/* background:rgba(244,244,244,1); */
	}

	.connect {
		width: 750px;
		float: left;
	}
	/* footer {
		width: 750px;
		height: 400px;
	} */

	.footer-tip {
		width: 210px;
		height: 50px;
		background: rgba(204, 45, 48, 1);
		border-radius: 10px;
		color: white;
		line-height: 50px;
		font-size: 28px;
		text-align: center;
		margin: 40px 0 0 20px;
	}

	.footer-connect {
		width: 710px;
		height: auto;
		margin: 50px auto 0;
		/*background: darkcyan;*/
		font-size: 22px;
		color: #0c0c0c;
		text-align: justify;
		line-height: 33px;
		background: white;
		padding: 25px 10px;
		border-radius: 10px;
	}

	.footer-connect p {
		margin-bottom: 10px;
	}
	.noRedPacketTip-box img {
		width: 318px;
		height: 194px;
		display: block;
		position: absolute;
		top: 450px;
		left: 210px;
	}

	.noRedPacketTip-box p {
		margin: 60px auto 0;
		text-align: center;
		font-size: 32px;
		color: #bbbbbb;
	}

	.redPacketBoxHide {
		width: 100%;
		height: 80px;
		text-align: center;
		position: absolute;
		bottom: 250px;
		left: 0;
		display: none;
		animation: hideTip 2.8s;
	}

	.redPacketBoxShow {
		width: 100%;
		height: 80px;
		text-align: center;
		position: absolute;
		bottom: 250px;
		left: 0;
		animation: fadeTip 0.8s;
	}

	@keyframes fadeTip {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes hideTip {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}

	.redPacketdiv {
		width: auto;
		height: 80px;
		text-align: center;
		line-height: 80px;
		margin: 0 aotuo;
		color: white;
		background: rgba(0, 0, 0, 0.4);
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4), -1px -1px 5px rgba(0, 0, 0, 0.4);
		border-radius: 10px;
		font-size: 34px;
		padding: 0 20px;
		display: inline-block;
	}

	.huiColor {
		background: rgb(233, 233, 233);
	}

	.color99 {
		color: #999999;
	}

	.btnHui {
		background: rgb(204, 204, 204);
	}

	.red-code-base64-box {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*.redCodeBase64Center {
		width: 750px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.redCodeBase64Center div img {
		width: 500px;
		height: 500px;
	}

	.redCodeBase64Center div {
		background: #fff;
		text-align: center;
	}

	.redCodeBase64Center p {
		color: #000;
		text-align: center;
		font-size: 30px;
		padding-bottom: 15px;
	}

	.closeMe {
		width: 98px;
		text-align: center;
		margin-top: 15px;
	}*/

	.van-popup {
		width: 86%;
		border-radius: 6px
	}

	.mine-red-packet /deep/ .van-overlay {
		background-color: rgba(0, 0, 0, 0.4);
	}

	.exchange-rules-box {
		padding: 40px 26px 80px;
		text-align: justify;
	}

	.exchange-rules-box .title {
		margin-bottom: 30px;
		text-align: center;
		font-size: 40px;
		font-weight: 400;
		color: #222222;
	}

	.exchange-rules-box .tip-connect {
		font-size: 28px;
		color: #333333;
	}

	.exchange-rules-box .tip-connect p {
		line-height: 48px;
	}

	.forkOff {
		position: fixed;
		bottom: 24%;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 3000;
		height: 70px;
		width: 70px;
		background: url(../../assets/images/forkOff.png) no-repeat;
		background-size: 100% 100%;
	}

	.white-bg-box {
		width: 536px;
		height: 693px;
		background: #FFFFFF;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.conversion-title {
		font-size: 30px;
		font-weight: 400;
		color: #797979;
		margin: 26px 0 41px;
	}

	.conversion-box {
		width: 615px;
		height: 804px;
		background: url(../../assets/images/redPacket/conversion-bg.png) no-repeat;
		background-size: 615px 804px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.close-btn {
		width: 275px;
		height: 60px;
		background: linear-gradient(90deg, #FFB98A, #FFA35F);
		box-shadow: 7px 8px 18px 0px rgba(252, 103, 148, 0.35);
		border-radius: 25px;
		color: white;
		line-height: 60px;
		text-align: center;
		font-size: 32px;
		margin: 30px 0 10px 0;
	}

	.er-img-box {
		width: 380px;
		height: 380px;
		position: relative;
	}

	.er-code-img {
		width: 380px;
		height: 380px;
	}

	.er-time {
		width: 380px;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -40px;
		background: #FFFFFF;
		font-size: 28px;
		font-weight: 500;
		color: #FF0101;
		text-align: center;
		padding: 10px 0;
		line-height: 40px;
	}

	.tip-text1 {
		font-size: 22px;
		font-weight: 400;
		color: #FF0101;
		margin-top: 20px;
	}
	.connectRedBox /deep/ .nav-bar-box .van-tab:nth-of-type(1){
		margin-right: 0!important;
	}
	.connectRedBox /deep/ .nav-bar-box .van-tab:nth-of-type(2){
		margin-left: 168px;
		margin-right: 168px;
	}
	.nav-tab-box{
		height: calc(100vh - 168px);
		width: 100vw;
		padding: 23px 0;
		overflow-y: auto;
		background: #F9F9F9;
		display: flex;
		justify-content: center;
	}
	.header-conatiner-zxyhIos ~  .connectRedBox .nav-tab-box{
		height: calc(100vh - 228px);
	}
	.nav-tab-box ul{
		width: 750px;
	}
	.collect-time{
		margin-left: 31px;
		margin-top: 28px;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		line-height: 40px;
	}
	.nav-tab-box li:nth-of-type(1) .collect-time{
		margin-top: 14px;
	}
	.item-box-bottom{
		width: 100%;
		height: 177px;
		background: url('../../assets/images/zxyh/my/bg_white.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
	}
	.item-box-expired{
		background: url('../../assets/images/zxyh/my/bg_grey.png') no-repeat;
		background-size: 100% 100%;
	}
	.item-box-expired .item-left,.item-box-expired .item-right{
		color: #999999;
	}
	.item-box-redeemed .item-left{
		color: #666666;
	}
	.item-box-redeemed .item-right{
		color: #333333;

	}
	.item-left{
		width: 229px;
		/* background: red; */
		margin-left: 32px;
		margin-right: 52px;
		font-size: 36px;
		font-weight: 600;
		color: #FF4448;
		line-height: 50px;
		letter-spacing: 1px;
		text-align: center;
	}
	.item-right{
		margin-left: 20px;
	}
	.item-right p{
		font-size: 24px;
		font-weight: 400;
		color: #333333;
		line-height: 33px;
		letter-spacing: 1px;
	}
	.item-date{
		margin-top: 4px;
		margin-bottom: 8px;
	}
	.item-right .item-to-remind{
		display: flex;
		align-items: center;
		color: #FF4649;
	}
	.item-right .item-to-remind::after{
		content: " ";
		display: inline-block;
		margin-left: 18px;
		height: 24px;
		width: 24px;
		background: url('../../../src/assets/images/zxyh/my/path.png') no-repeat;
		background-size: 100% 100%;
	}
	.item-right .item-tip{
		display: flex;
		align-items: center;
		color:  #FA8C18;
	}
	.item-right .item-tip::after{
		content: " ";
		display: inline-block;
		margin-left: 16px;
		height: 26px;
		width: 26px;
		background: url('../../../src/assets/images/zxyh/my/remind.png') no-repeat;
		background-size: 100% 100%;
	}
	.item-right .redeemed{
		font-size: 24px;
		font-weight: 600;
		color:  #6DD400;
	}
	.item-right .expired{
		font-size: 24px;
		font-weight: 600;
		color:  #FF0000;

	}
	.no-data{
      display: flex;
     flex-direction: column;
     align-items: center;
	 padding-top: 170px;
	}
	.no-data img{
		display: block;
		height: 326px;
		width: 326px;
	}
	.no-data p{
		font-size: 30px;
		font-weight: 400;
		color: #999999;
		line-height: 42px;
		letter-spacing: 1px;
	}
	.connectRedBox /deep/ .van-loading__text{
		font-size: 32px;
	}
</style>
